<template>
  <div>



    <el-button @click="JyMx()" type="text">明细</el-button>
    <!-- 条件查询 -->
    <el-form ref="form" :model="form" label-width="100%">
      年份选择<el-select v-model="form.gshenhe" placeholder="2020年" clearable class="jiaofei">
        <el-option label="2020年" value="0"></el-option>
        <el-option label="2021年" value="1"></el-option>
        <el-option label="2022年" value="2"></el-option>
      </el-select>

      月份<el-select v-model="form.gcid" placeholder="全部" clearable class="jiaofei">
        <el-option label="1月" value="0"></el-option>
        <el-option label="2月" value="1"></el-option>
        <el-option label="3月" value="2"></el-option>
      </el-select>

      楼栋<el-select v-model="form.gbid" placeholder="全部" clearable class="jiaofei">
        <el-option label="1栋" value="0"></el-option>
        <el-option label="2栋" value="1"></el-option>
        <el-option label="3栋" value="2"></el-option>
      </el-select>

      单元<el-select v-model="form.gbid" placeholder="全部" clearable class="jiaofei">
        <el-option label="1单元" value="0"></el-option>
        <el-option label="2单元" value="1"></el-option>
        <el-option label="3单元" value="2"></el-option>
      </el-select>

      楼层<el-select v-model="form.gbid" placeholder="全部" clearable class="jiaofei">
        <el-option label="1层" value="0"></el-option>
        <el-option label="2层" value="1"></el-option>
        <el-option label="3层" value="2"></el-option>
      </el-select>

      房号<el-select v-model="form.gbid" placeholder="全部" clearable class="jiaofei">
        <el-option label="101" value="0"></el-option>
        <el-option label="102" value="1"></el-option>
      </el-select> <br> <br>

      缴费平台<el-select v-model="form.gbid" placeholder="全部" clearable class="jiaofei">
        <el-option label="微信支付" value="0"></el-option>
        <el-option label="支付宝支付" value="1"></el-option>
      </el-select>

      缴费渠道<el-select v-model="form.gbid" placeholder="全部" clearable class="jiaofei">
        <el-option label="微信(线上)" value="0"></el-option>
        <el-option label="线下" value="1"></el-option>
        <el-option label="线下冲抵" value="2"></el-option>
        <el-option label="预存" value="3"></el-option>
      </el-select>

      支付状态<el-select v-model="form.gbid" placeholder="全部" clearable class="jiaofei">
        <el-option label="支付成功" value="0"></el-option>
        <el-option label="支付失败" value="1"></el-option>
        <el-option label="未支付" value="2"></el-option>
        <el-option label="待支付" value="3"></el-option>
        <el-option label="重复支付" value="4"></el-option>
      </el-select>

      账单号<el-input v-model="form.gname" placeholder="请输入" style="width: 150px;"></el-input>

      <!-- 按钮 -->
      <el-button type="primary" @click="findPage">查询</el-button>

      <el-button type="success" @click="toAdd()">导出</el-button>

    </el-form><br><br>

    <!--交易记录 金额表 展示 -->
    <div class="box">
      <el-table :data="tableData" style="width: 100%;">
        <el-table-column prop="money" label="实收总额(元)">
        </el-table-column>
        <el-table-column prop="money" label="实收订单数(元)">
        </el-table-column>
      </el-table>
    </div>


    <!-- 交易记录表格 -->
    <el-table :data="JiaoFeiData" border style="width: 100%">
      <el-table-column type="selection" width="55">
      </el-table-column>
      <el-table-column prop="id" label="支付时间">
      </el-table-column>
      <el-table-column prop="gid" label="账单号">
      </el-table-column>
      <el-table-column prop="gname" label="交易流水号">
      </el-table-column>
      <el-table-column prop="gdesc" label="实收金额(元)">
      </el-table-column>
      <el-table-column prop="gnum" label="缴费平台">
      </el-table-column>
      <el-table-column prop="gnum" label="缴费渠道">
      </el-table-column>
      <el-table-column prop="status" label="支付状态">
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="JyMx(scope.row)" type="text">明细</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
      :page-sizes="[7, 20, 30, 40]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>


    <el-dialog title="明细" :visible.sync="JyMxDialog">

      <!-- 盒子 -->
      <div style="width: 100%;height:100px;">

        <el-form ref="form" :model="form" label-width="80px">
          <span style="margin-right: 220px;"> 账单号:{{ form.zhangdan }} </span>

          <span style="margin-right: 220px;"> 账单人:{{ form.zhangdan }} </span>

          <span style="margin-right: 220px;"> 房屋:{{ form.zhangdan }} </span><br><br>

          <span style="margin-right: 220px; "> 缴费渠道:{{ form.zhangdan }} </span>

          <span style="margin-right: 220px;"> 付款时间:{{ form.zhangdan }} </span>

          <span style="margin-right: 220px;"> 订单状态:{{ form.zhangdan }} </span>
        </el-form>
      </div>


      <!-- 明细表格 -->
      <el-table :data="JiaoFeiData" border style="width: 100%">

        <el-table-column prop="id" label="月份">
        </el-table-column>
        <el-table-column prop="gid" label="缴费项">
        </el-table-column>
        <el-table-column prop="gname" label="账单周期">
        </el-table-column>
        <el-table-column prop="gdesc" label="收费周期">
        </el-table-column>
        <el-table-column prop="gnum" label="单价">
        </el-table-column>
        <el-table-column prop="gnum" label="数量">
        </el-table-column>
        <el-table-column prop="status" label="应付总计(元)">
        </el-table-column>
        <el-table-column prop="status" label="优惠(元)">
        </el-table-column>
        <el-table-column prop="status" label="实付(元)">
        </el-table-column>
      </el-table>
      <span style="margin-right: 650px;">交易流水号:000022020152525586525855</span>

    </el-dialog>










  </div>
</template>

<script>
export default {
  data() {
    return {
      // 房间查询盒子值
      dialogTableVisible: false,
      // 业主查询盒子值
      dialogTableVisible2: false,
      form: {},
      tableData: [],
      pageNum: 1,
      pageSize: 7,
      total: 0,
      // 预存页面
      Dialog: false,
      pojo: {},

      // 缴费情况  页面大盒子
      PaymentDiv: true,
      // 缴费情况  详情页面 大盒子
      DetailDiv: false,

      // 缴纳情况设置成true
      qingkuang: true,
      // 缴纳情况表展示
      JiaoFeiData: [],

      //交易记录页面  明细 弹窗
      JyMxDialog: false,


    };
  },
  methods: {
    JyMx: function () {
      this.JyMxDialog = true;
    },
    // 查询
    findPage: function () {

    },
    // 收银台页面  去收费查询 跳转页面 按钮
    submitForm: function () {

    },
    // 作废账单记录按钮
    ZuoFei() {

    },
    // 预存
    Prexisted() {
      this.Dialog = true;
    },

    // 缴费情况 表操作 详情
    Detail() {

      this.PaymentDiv = false;
      this.DetailDiv = true;

    },
    //缴费情况标签页 返回按钮
    Out() {
      this.PaymentDiv = true;
      this.DetailDiv = false;
    },
    // 分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.findPage();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val;
      this.findPage();
    },

  },
  //在实例化之后

  created() {
  },

};
</script>

<style>
.margin {
  width: 200px;
}

.jiaofei {
  width: 150px;
}

.box {
  margin-top: 1px;
  height: 100px;
  width: 100%;
}
</style>
